<!DOCTYPE html>
{% load static %}
<html lang="en">
  <head>Rango</head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <!--
  <link href="{{ BOOTSTRAP_URL}}/dist/css/bootstrap.min.css" rel="stylesheet">
  -->
  <link href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}" rel="stylesheet">
  <body>
    <h1>Rango says...</h1>
    <div>
      hey there parter! <br />
    </div>
    <div>
      {% if categories %}
      <ul>
        {% for category in categories %}
          <li>{{ category.name }}</li>
        {% endfor %}
      </ul>
      {% else %}
        <strong>There are no categories present!</strong>
      {% endif %}
    </div>
    <div>
      <!-- <a href="/rango/about/">About</a> <br /> -->
      <button type="button" class="btn btn-danger"><a href="/rango/about/">About</a></button><br />
      <img src="{{ MEDIA_URL}}cj.jpg" width="256" height="128" alt="Picture of Rango">
    </div>
    



    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="{% static 'bootstrap/dist/js/bootstrap.min.js' %}"></script> 
    <!--
    <script src="{{ BOOTSTRAP_URL }}/dist/js/bootstrap.min.js"></script>
    -->
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    -->
  </body>
</html>